<template>
  <div class="brand">
    <!-- 品牌管理 -->
    <Popup ref="editBrand" @call="call" @refrush="getBrandList" />
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" size="medium" @click="addGoods">新增</el-button>
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed
        />
        <el-table-column
          prop="name"
          label="品牌名称"
          width="150"
          align="center"
        />
        <el-table-column
          label="展示状态"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.showStatus"
              :active-value="1"
              :inactive-value="0"
              @change="isChange(scope.row)"
            />

          </template>
        </el-table-column>
        <el-table-column
          label="logo"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <img class="img" :src="scope.row.logo" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="专区大图"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <img class="img" :src="scope.row.bigPic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="brandStory"
          label="品牌故事"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="300"
        />
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
          width="150"
        />
        <el-table-column
          prop="productCommentCount"
          label="产品评论数量"
          align="center"
          width="150"
        />
        <el-table-column
          prop="productCount"
          label="产品数量"
          align="center"
          width="150"
        />
        <el-table-column
          prop="factoryStatus"
          label="是否品牌制造商"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div>
              {{ (scope.row.factoryStatus)?'是':'不是' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="100"
          fixed="right"
        >
          <template slot-scope="scope">
            <span style="margin-right:10px;color:#00f; cursor:pointer" @click="compile(scope.row)">编辑</span>
            <span style="color:#f00; cursor:pointer" @click="del(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="pages.total"
        :current-page="pages.start"
        :page-sizes="pages.pageSize"
        :page-size="pages.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import { findBrandByPage as findBrandByPageApi, switchShowStatus } from '@/api/product/brand/index'
import Popup from './Popup'
export default {
  components: {
    Popup
  },
  props: {

  },
  data() {
    return {
      pages: {
        start: 1,
        limit: 10,
        total: '',
        pageSize: [5, 10, 15, 20]
      },
      list: [],
      dialogFormVisible: true,
      form: ''
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      findBrandByPageApi(this.pages.start, this.pages.limit).then(res => {
        console.log(res)
        const { data, message: errMsg, success } = res
        if (success) {
          const { rows, total } = data
          this.list = rows // 数据列表
          this.pages.total = total // 数据长度
        } else {
          this.$message.error(errMsg)
        }
      })
    },
    del(el) { // 点击删除

    },
    compile(val) { // 点击编辑
      console.log(val)
    },
    isChange(el) { // 点击展示状态
      console.log(el)
      switchShowStatus({
        id: el.id,
        status: el.showStatus
      }).then(res => {
        console.log(res)
        const { message: errMsg, success } = res
        if (success) {
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        } else {
          this.$message.error(errMsg)
        }
      })
    },
    addGoods() { // 点击新增
      // this.dialogFormVisible = true
      this.$refs.editBrand.openDialog()
    },
    getBrandList(el) { // 执行成功属性列表
      console.log(el)
    },
    call() {
      this.init()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pages.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pages.start = val
      this.init()
    }
  }
}
</script>

<style scoped lang="scss">
.brand{
  .img{
    width: 100px;
    height: 100px;
  }
}
</style>
